<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>
<div id="a" style="...">
    <el-pagination
            :page-sizes="[20,50,100,200]" :total="1000" background
            current-page="1"
            page-size="100"
            layout="first,pager,last, next,prev">
    </el-pagination>

</div>

<script>
    Vue.component("el-pagination", {
        props: ["background", "page-size", "current-page", "layout", "total","page-sizes"],
        template: `
            <div>
                <select v-if="pageSizes != undefined"
                        v-model="selectSize" @change="pageSize = selectSize">
                        <option v-for="size in pageSizes" :value="size">每页{{size}}行</option>
                </select>
                <template v-for="l in layouts">
                      <span v-if="l == 'first'" class="pager" style="background-color: #eee"
                              @click="curPage += (curPage == 1 ? 0 : -1)">上一页</span>
                      <span v-if="l == 'pager'" class="pager" v-for="p in pages"  :style="getStyle(p)"
                              @click="curPage = p">{{p}}</span>
                      <span v-if="l == 'next'" class="pager" :style="getStyle(0)"
                              @click="curPage += (curPage == pages ? 0 : 1)">下一页</span>
                      <span v-if="l == 'last'" class="pager" style="background-color: #eee">最后一页</span>
                </template>
            </div>
           `,
        data() {
            return {
                curPage: 1,
                layouts: [],
                selectSize :0
            };
        },
        created() {
            this.curPage = parseInt(this.currentPage);
            //字符串切割数组
            this.layouts = this.layout.split(/\W+/);
            this.selectSize = this.pageSize;
        },
        computed: {
            //总页数
            pages() {
                let all = this.total / this.pageSize;
                all = Math.floor(all);//取整
                if (this.total % this.pageSize != 0) {
                    all++;
                }
                return all;
            }
        },
        methods: {
            getStyle(p) {
                let ret = {backgroundColor: null};
                if (this.background != undefined) {
                    ret.backgroundColor = "#eee";
                }
                if (p == this.curPage) {
                    ret.backgroundColor = "#aaa";
                }
                return ret;
            }
        }

    })

    var v = new Vue({
        el: "#a",
        data: {}
    })
</script>
<style>
    .pager {
        text-align: center;
        display: inline-block;
        min-width: 20px;
        padding: 5px;
        margin: 5px;
        border-radius: 5px;
        cursor: pointer;
    }
</style>
</body>
</html>